<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<view slot="bottom">
				<template>
					<view class="timer">
						<text>2023-07-24 15:12</text>
					</view>
				</template>
			</view>
		</hx-navbar>
		<view class="main">
			<u--form labelPosition="top" :model="model" ref="uForm">
				<u-form-item label="客户" prop="clientele" borderBottom required>
					<view >
						<text class="input-text">{{ model.clienteleName || '请选择客户' }}</text>
					</view>
				</u-form-item>
				<u-form-item label="备注" prop="remark" borderBottom required>
					<u--input v-model="model.remark" border="none" placeholder="请输入备注"></u--input>
				</u-form-item>
				<u-form-item labelWidth="120" label="联系人" prop="linkmanContacts" borderBottom required>
					<u--input v-model="model.linkmanContacts" border="none" placeholder="请输入联系人"></u--input>
				</u-form-item>
				<u-form-item label="手机" prop="cellphone" borderBottom required>
					<u--input v-model="model.cellphone" border="none" placeholder="请输入手机"></u--input>
				</u-form-item>
				<u-form-item label="地址" prop="address" borderBottom required>
					<u--input v-model="model.address" border="none" placeholder="请输入地址"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="view_card">
			<view class="card">
				<view class="header">
					<text class="title">001布匹001</text>
					<text class="desc">#1</text>
				</view>
				<view class="price">
					<text class="label">单价</text>
					<text class="value">0</text>
				</view>
				<view class="remark">
					<text class="label">备注</text>
					<text class="value">测试谁是谁</text>
				</view>
			</view>
			<view class="card">
				<view class="header">
					<text class="title">001布匹001</text>
					<text class="desc">#1</text>
				</view>
				<view class="price">
					<text class="label">单价</text>
					<text class="value">0</text>
				</view>
				<view class="remark">
					<text class="label">备注</text>
					<text class="value">测试谁是谁</text>
				</view>
			</view>
		</view>
		<view class="button">
			<view class="select" @click="selectProducts">
				<text>选产品</text>
			</view>
			<view class="opt">
				<u-button type="primary" text="确定"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					title: "销售报价",
					color: "#ffffff",
					backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				},
				model: {
					clienteleName: '',
					remark: '',
					linkmanContacts: '',
					cellphone: '',
					address: ''
				}
			}
		},
		methods: {
			selectProducts() {
				uni.navigateTo({
					url: "pages/application/pages/cloth/customer-product/index"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.timer {
		padding-bottom: 20rpx;
		text-align: center;
		color: #dae0e0;
		font-size: 23rpx;
	}

	.main {
		margin-top: 35rpx;
		padding: 10rpx 30rpx;
		padding-bottom: 40rpx;
		background-color: #fff;

		.input-text {
			color: #b3b3b3;
		}
	}
	
	.view_card {
		margin-top: 20rpx;
		.card {
			padding: 20rpx 10rpx;
			background-color: #fff;
			margin-bottom: 15rpx;
			
			.header {
				font-size: 32rpx;
				.title {
					color: #00edfe;
					margin-right: 10rpx;
				}
				.desc {
					color: #00ff00;
				}
			}
			
			.price .value {
				color: #ff3b3c;
			}
			
			.remark .label, .price .label{
				font-size: 28rpx;
			}
			
			.price, .remark{
				color: #545454;
				font-size: 25rpx;
				.value {
					margin-left: 10rpx;
				}
			}
		}
	}

	.button {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 20rpx;
		box-sizing: border-box;
		margin-top: 80rpx;
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		
		.select {
			font-size: 32rpx;
			color: #00adff;
		}
		
		.opt {
			width: 200rpx;
			margin-left: 20rpx;
		}
	}
</style>